<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>本地演示</title>
  <link rel="stylesheet" href="./static/layui/css/layui.css">
  <style>
  html{background-color: #333;}
  </style>
</head>
<body>


<script src="./static/layui/layui.js"></script>
<script>
var wsServer = 'ws://115.159.149.77:9501';
var websocket = new WebSocket(wsServer);
    
		
		

		
layui.config({
  layimPath: 'dist/' //配置 layim.js 所在目录
  ,layimAssetsPath: 'dist/layim-assets/' //layim 资源文件所在目录
}).extend({
  layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
}).use('layim', function(layim){ //加载组件
  //基础配置
  layim.config({

    //初始化接口
    init: {
      url: '/index.php'
      ,data: {}
      ,headers: {
        token : localStorage.token
      }

    }
    //查看群员接口
    ,members: {
      url: '/index/qun'
      ,data: {}
      ,headers: {
        token : localStorage.token
      }
    }
    //上传图片接口
    ,uploadImage: {
      url: '/upload/image' //（返回的数据格式见下文）
      ,type: '' //默认post
    }
    //上传文件接口
    ,uploadFile: {
      url: '/upload/file' //（返回的数据格式见下文）
      ,type: '' //默认post
    }
    ,isAudio: true //开启聊天工具栏音频
    ,isVideo: true //开启聊天工具栏视频
    //扩展工具栏
    ,tool: [{
      alias: 'code'
      ,title: '代码'
      ,icon: '&#xe64e;'
    }]
    
    //,brief: true //是否简约模式（若开启则不显示主面板）
    
    //,title: 'WebIM' //自定义主面板最小化时的标题
    //,right: '100px' //主面板相对浏览器右侧距离
    //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
    ,initSkin: '5.jpg' //1-5 设置初始背景
    //,skin: ['aaa.jpg'] //新增皮肤
    //,isfriend: false //是否开启好友
    //,isgroup: false //是否开启群组
    //,min: true //是否始终最小化主面板，默认false
    ,notice: true //是否开启桌面消息提醒，默认false
    //,voice: false //声音提醒，默认开启，声音文件为：default.mp3
    
    ,msgbox: layui.cache.layimAssetsPath + 'html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
    ,find: layui.cache.layimAssetsPath + 'html/find.html' //发现页面地址，若不开启，剔除该项即可
    ,chatLog: layui.cache.layimAssetsPath + 'html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
    
  });

  /*
  layim.chat({
    name: '自定义窗口-1'
    ,type: 'kefu'
    ,avatar: ''
    ,id: -1
  });
  layim.chat({
    name: '自定义窗口-2'
    ,type: 'kefu'
    ,avatar: ''
    ,id: -2
  });
  layim.setChatMin();*/

  //触发在线状态的切换事件
  layim.on('online', function(data){
    //console.log(data);
  });
  
  //触发签名修改
  layim.on('sign', function(value){
    //console.log(value);
  });

  //触发自定义工具栏点击，以添加代码为例
  layim.on('tool(code)', function(insert){
    layer.prompt({
      title: '插入代码'
      ,formType: 2
      ,shade: 0
    }, function(text, index){
      layer.close(pc);
      insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
    });
  });

//   连接关闭   
websocket.onclose = function (evt) {
	console.log("连接已关闭"+getCurrentDate());
};  
//   连接成功
    websocket.onopen = function (evt) {};
//   连接出错
    websocket.onerror = function (evt, e) {
    	console.log('Error occured: ' + evt.data);
    };
  //触发发送消息
    layim.on('sendMessage', function(data){
        
        var To = data.to;
        
        if(To.type=="friend"){
            layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
        }
        console.log(data)
        websocket.send(JSON.stringify({
                'class': 'LayIm',
                'action': 'chatMessage',
                'content': data
            }));
    });
        // 监听接收消息
    websocket.onmessage = function (res) {
        // 判断是否连接成功
       if(res.data=='success'){
           console.log(1)
        //   初始化页面
           layim.on('ready', function (options) {
           //发送用户信息给服务端
        		var uid=options.mine.id;
        		websocket.send(
        		    JSON.stringify({
                        'class': 'LayIm',
                        'action': 'bind',
                        'content': {
                            'uid': uid
                        }
                    }
                    )
                ); 
            });
       }else{
        //   信息内容呈现到页面
            res=res.data
            var res = JSON.parse(res)
            // console.log(res)
            // {"username":"feifei","avatar":"http:\/\/q1.qlogo.cn\/g?b=qq&nk=1003713200&s=100","id":2,"mine":true,"content":"1"}
            obj = {
                username: res.username
                ,avatar: res.avatar
                ,id: res.id
                ,type: res.type
                ,content: res.content
                ,mine: false
            }
            layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
            layim.getMessage(obj); //res.data即你发送消息传递的数据（阅读：监听发送的消息）
       }
    };


  //触发查看群员
  layim.on('members', function(data){
    //console.log(data);
  });
  
  //触发聊天窗口的切换
  layim.on('chatChange', function(res){
    var type = res.data.type;
    if(type === 'friend'){
      //模拟标注好友状态
      //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
    } else if(type === 'group'){
      var username = layim.cache().mine.username;
      //模拟系统消息
      layim.getMessage({
        system: true
        ,id: res.data.id
        ,type: "group"
        ,content: username + '加入群聊'
      });
    }
  });

  //获取当前日期时间 格式 yyyy-MM-dd HH:MM:SS
  function getCurrentDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentdate;
  }

});
</script>
</body>
</html>
